<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../../vue.js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      {{name}} <br />
      {{_directInactive}}<br />
      {{ _hasHookEvent }}<br />
      {{_data.name}}
    </div>
    <script>
      Vue.config.productionTip = false;
      var data = {
        name: 'Onion22',
      };
      let vm = new Vue({
        el: '#app',
        data,
      });
      console.log(vm);

      
      // 一个问题
      // let a = 111;  // 定义变量a

      // let obj = {  // 定义对象
      //   b: 222,
      //   a: a,  // a:111
      // };
      // console.log(a);
      //  console.log(obj);
      // a = 333;  // 修改a变量
      // console.log(a);
      // console.log(obj);

      // let obj1 = {
      //   a: 111,
      // };
      // let obj2 = {
      //   b: 222,
      // };
      // Object.defineProperty(obj2, 'a', {
      //   get() {
      //     console.log('obj2被读取了');
      //     return obj1.a;
      //   },
      //   set(value) {
      //     console.log('obj2被修改了');
      //     obj1.a = value;
      //   },
      // });
      // // 读取obj2的属性a
      // console.log(obj2.a); // 输出：obj2被读取了，1

      // // 修改obj2的属性a
      // obj2.a = 2; // 输出：obj2被修改了

      // // 再次读取obj2的属性a
      // console.log(obj2.a); // 输出：obj2被读取了，2
    </script>
  </body>
</html>
